<template>
    <view class="video-container">
        <!-- �          ��频播放器 -->
        <video
            id="myVideo"
            class="video-player"
            :src="videoUrl"
            :autoplay="autoplay"
            :controls="false"
            :loop="loop"
            :muted="muted"
            :danmu-list="danmuList"
            :enable-danmu="enableDanmu"
            @error="onError"
            @play="onPlay"
            @pause="onPause"
            @ended="onEnded"
            @timeupdate="onTimeUpdate"
            @fullscreenchange="onFullscreenChange"
        ></video>

        <!-- 自定义控制面板 -->
        <view class="control-panel" v-if="showControls">
            <!-- 中央控制区域 -->
            <view class="center-controls">
                <view class="play-pause-btn" @click="togglePlay">
                    <uni-icons
                        :type="isPlaying ? 'pause' : 'play'"
                        size="48"
                        color="#fff"
                    ></uni-icons>
                </view>
            </view>

            <!-- 底部控制栏 -->
            <view class="bottom-controls">
                <!-- 底部按钮组 -->
                <view class="button-group">
                    <view class="control-btn" @click="toggleMute">
                        <uni-icons
                            :type="muted ? 'mute' : 'sound'"
                            size="24"
                            color="#fff"
                        ></uni-icons>
                    </view>
                    <view class="control-btn" @click="toggleDanmu">
                        <uni-icons
                            type="chat"
                            size="24"
                            :color="enableDanmu ? '#FF5252' : '#fff'"
                        ></uni-icons>
                    </view>
                    <view class="control-btn" @click="toggleLoop">
                        <uni-icons
                            type="refresh"
                            size="24"
                            :color="loop ? '#FF5252' : '#fff'"
                        ></uni-icons>
                    </view>
                    <view class="control-btn" @click="toggleFullscreen">
                        <uni-icons
                            :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
                            size="24"
                            color="#fff"
                        ></uni-icons>
                    </view>
                    <view class="control-btn" @click="showQualityOptions">
                        <uni-icons type="gear" size="24" color="#fff"></uni-icons>
                        <text class="quality-text">{{ currentQuality }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 更多选项弹出层 -->
        <uni-popup ref="morePopup" type="bottom">
            <view class="popup-content">
                <view class="popup-title">更多选项</view>
                <view class="popup-item" @click="changePlaybackRate">
                    <text>播放速度</text>
                    <text class="popup-value">{{ playbackRate }}x</text>
                </view>
                <view class="popup-item" @click="captureScreen">
                    <text>截图</text>
                </view>
                <view class="popup-item" @click="reportVideo">
                    <text>举报</text>
                </view>
                <view class="popup-item" @click="downloadVideo">
                    <text>下载视频</text>
                </view>
                <view class="popup-cancel" @click="closeMorePopup">取消</view>
            </view>
        </uni-popup>

        <!-- 清晰度选择弹出层 -->
        <uni-popup ref="qualityPopup" type="bottom">
            <view class="popup-content">
                <view class="popup-title">选择清晰度</view>
                <view
                    class="popup-item"
                    v-for="(item, index) in qualityOptions"
                    :key="index"
                    @click="changeQuality(index)"
                >
                    <text>{{ item.label }}</text>
                    <uni-icons
                        v-if="currentQuality === item.label"
                        type="checkmarkempty"
                        size="20"
                        color="#FF5252"
                    ></uni-icons>
                </view>
                <view class="popup-cancel" @click="closeQualityPopup">取消</view>
            </view>
        </uni-popup>

        <!-- 播放速度选择弹出层 -->
        <uni-popup ref="ratePopup" type="bottom">
            <view class="popup-content">
                <view class="popup-title">选择播放速度</view>
                <view
                    class="popup-item"
                    v-for="(rate, index) in rateOptions"
                    :key="index"
                    @click="changeRate(rate)"
                >
                    <text>{{ rate }}x</text>
                    <uni-icons
                        v-if="playbackRate === rate"
                        type="checkmarkempty"
                        size="20"
                        color="#FF5252"
                    ></uni-icons>
                </view>
                <view class="popup-cancel" @click="closeRatePopup">取消</view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            videoUrl: "http://example.com/video.mp4", // 视频地址
            videoTitle: "视频标题",
            autoplay: true,
            isPlaying: false,
            loop: false,
            muted: false,
            currentTime: 0,
            duration: 0,
            isFullscreen: false,
            showControls: true,
            controlsTimer: null,
            enableDanmu: false,
            danmuList: [
                { text: "弹幕1", color: "#ff0000", time: 1 },
                { text: "弹幕2", color: "#00ff00", time: 3 },
            ],
            currentQuality: "高清",
            qualityOptions: [
                { label: "标清", url: "http://example.com/video-low.mp4" },
                { label: "高清", url: "http://example.com/video.mp4" },
                { label: "超清", url: "http://example.com/video-hd.mp4" },
            ],
            playbackRate: 1.0,
            rateOptions: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
            innerHeight: 0,
        };
    },
    filters: {
        formatTime(seconds) {
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return `${min}:${sec < 10 ? "0" + sec : sec}`;
        },
    },
    onLoad(options) {
        // 初始化视频上下文
        this.videoContext = uni.createVideoContext("myVideo", this);

        // 隐藏控制面板的定时器
        this.startControlsTimer();
        this.setVhVariable();
        window.addEventListener("resize", this.setVhVariable);
    },
    methods: {
        setVhVariable() {
            const vh = window.innerHeight - 55;
            this.innerHeight = vh;
        },
        onError() {
            console.log("onError")
            uni.showToast({
                title: "连接失败",
                icon: "none",
            });
        },
        // 播放/暂停切换
        togglePlay() {
            console.log("togglePlay")
            uni.showToast({
                title: "连接失败",
                icon: "none",
            });
            // if (this.isPlaying) {
            //     this.videoContext.pause();
            // } else {
            //     this.videoContext.play();
            // }
            // this.startControlsTimer();
        },

        // 静音切换
        toggleMute() {
            this.muted = !this.muted;
            this.startControlsTimer();
        },

        // 弹幕开关
        toggleDanmu() {
            this.enableDanmu = !this.enableDanmu;
            this.startControlsTimer();
        },

        // 循环播放开关
        toggleLoop() {
            this.loop = !this.loop;
            this.startControlsTimer();
        },

        // 全屏切换
        toggleFullscreen() {
            if (this.isFullscreen) {
                this.videoContext.exitFullScreen();
            } else {
                this.videoContext.requestFullScreen({ direction: 0 });
            }
            this.startControlsTimer();
        },

        // 进度条变化
        onSliderChange(e) {
            this.currentTime = e.detail.value;
            this.videoContext.seek(this.currentTime);
            this.startControlsTimer();
        },

        onSliderChanging(e) {
            this.currentTime = e.detail.value;
            clearTimeout(this.controlsTimer);
        },

        // 显示更多选项
        showMoreOptions() {
            this.$refs.morePopup.open();
            this.startControlsTimer();
        },

        closeMorePopup() {
            this.$refs.morePopup.close();
        },

        // 显示清晰度选项
        showQualityOptions() {
            this.$refs.qualityPopup.open();
            this.startControlsTimer();
        },

        closeQualityPopup() {
            this.$refs.qualityPopup.close();
        },

        // 改变清晰度
        changeQuality(index) {
            const quality = this.qualityOptions[index];
            this.currentQuality = quality.label;
            this.videoUrl = quality.url;
            this.$refs.qualityPopup.close();
            this.startControlsTimer();
        },

        // 显示播放速度选项
        changePlaybackRate() {
            this.$refs.ratePopup.open();
            this.closeMorePopup();
        },

        closeRatePopup() {
            this.$refs.ratePopup.close();
        },

        // 改变播放速度
        changeRate(rate) {
            this.playbackRate = rate;
            this.videoContext.playbackRate(rate);
            this.$refs.ratePopup.close();
            this.startControlsTimer();
        },

        // 截图
        captureScreen() {
            this.videoContext.snapshot({
                success: (res) => {
                    uni.previewImage({
                        urls: [res.tempFilePath],
                    });
                },
            });
            this.closeMorePopup();
        },

        // 举报视频
        reportVideo() {
            uni.showToast({
                title: "已举报",
                icon: "none",
            });
            this.closeMorePopup();
        },

        // 下载视频
        downloadVideo() {
            uni.showLoading({
                title: "下载中...",
            });
            uni.downloadFile({
                url: this.videoUrl,
                success: (res) => {
                    uni.hideLoading();
                    uni.saveFile({
                        tempFilePath: res.tempFilePath,
                        success: (saveRes) => {
                            uni.showToast({
                                title: "下载成功",
                                icon: "success",
                            });
                        },
                    });
                },
                fail: () => {
                    uni.hideLoading();
                    uni.showToast({
                        title: "下载失败",
                        icon: "none",
                    });
                },
            });
            this.closeMorePopup();
        },

        // 视频事件监听
        onPlay() {
            this.isPlaying = true;
        },

        onPause() {
            this.isPlaying = false;
        },

        onEnded() {
            this.isPlaying = false;
        },

        onTimeUpdate(e) {
            this.currentTime = e.detail.currentTime;
            this.duration = e.detail.duration;
        },

        onFullscreenChange(e) {
            this.isFullscreen = e.detail.fullScreen;
        },

        // 控制面板显示/隐藏逻辑
        startControlsTimer() {
            clearTimeout(this.controlsTimer);
            this.showControls = true;
            this.controlsTimer = setTimeout(() => {
                if (this.isPlaying) {
                    this.showControls = false;
                }
            }, 3000);
        },

        // 点击屏幕显示/隐藏控制面板
        onVideoTap() {
            if (this.showControls) {
                this.showControls = false;
            } else {
                this.showControls = true;
                this.startControlsTimer();
            }
        },
    },
};
</script>
<style scoped>
.video-container {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
}

.video-player {
    width: 100%;
    height: 100%;
}

.control-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.back-btn,
.more-btn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-title {
    color: #fff;
    font-size: 16px;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.center-controls {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-pause-btn {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-controls {
    padding: 10px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.progress-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.time-text {
    color: #fff;
    font-size: 12px;
    min-width: 40px;
}

.slider {
    flex: 1;
    margin: 0 10px;
}

.button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.quality-text {
    font-size: 10px;
    margin-top: 2px;
}

.popup-content {
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 15px;
}

.popup-title {
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.popup-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px;
    border-bottom: 1px solid #f5f5f5;
}

.popup-value {
    color: #888;
}

.popup-cancel {
    text-align: center;
    padding: 15px 10px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    color: #ff5252;
    font-weight: bold;
}
</style>
